@charset "utf-8";
$imgUrl: '../../../static/images/';
html {
  height: 100%;
  body {
    height: 100%;
  }
}
.UserProject{
  .global-subtitle{
    .container{
      width: 1080px;
    }
    .options{
      display: flex;
      .slider{
        width: 220px;
      }
      .title{
        flex: 1;
      }
    }
  }
  .global-content-menu {
    .project-name-item {
      position: relative;
    }
    .info-num {
      width: 20px;
      height: 16px;
      line-height: 16px;
      position: absolute;
      top: 6px;
      right: 9px;
      text-align: center;
      background-color: #ff5453;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }
  }
  .global-content-Main{
    flex-direction: column;
    padding-bottom: 50px;
  }
  &-info{
    padding: 20px 40px;
    >header{
      margin-bottom: 15px;
      h3{
        font-size: 30px;
        color: #344562;
        text-align: left;
        line-height: 40px;
        float: left;
      }
      .powerby, .version{
        padding-left: 14px;
        margin-top: 14px;
        float: left;
        color: #9e9e9e;
        font: 12px/1.5 tahoma,"microsoft yahei","\5FAE\8F6F\96C5\9ED1";
      }
    }
    .options{
      background: #f9fafb;
      color:#008ed6;
      height: 37px;
      line-height: 37px;
      padding-left: 0;
      overflow: hidden;
      span {
        float: left;
        padding:0 15px;
        font-size:14px;
        cursor: pointer;
      }
      .baseline-adjust {
        float: right;
      }
    }
    .tool{
      .options-btns{
        margin-right: 10px;
        box-sizing: border-box;
        vertical-align: middle;
      }
      .btn-history-hidden{
        display: none;
      }
    }
  }

  .icon-list {
    .no-icon {
      text-align: center;
      padding: 60px 0;
      overflow: hidden;
      &-pic {
        background:url("#{$imgUrl}noMatchIcon.png") 0 -183px no-repeat;
        background-size: 100%;
        width:100px;
        height:100px;
        display:inline-block;
        margin:0 auto;
      }
      &-tips{
        font-size:14px;
        color:#9e9e9e;
        line-height:24px;
        text-align:center;
        margin:0 auto;
        overflow:hidden;
      }
    }
    .project-icon {
      position: relative;
      float: left;
    }
    .disabled-icon {
      .info {
        border: 1px solid #ff5453;
        .code {
          color: #ff5453;
        }
      }
      .status-tag {
        .added-icon {
          display: none;
        }
        .replaced-icon {
          display: none;
        }
      }
    }
    .deleted-icon {
      .info {
        border: 1px solid #9e9e9e;
        .code {
          color: #9e9e9e;
        }
      }
      .status-tag {
        background-color: #9e9e9e;
        .disabled-icon {
          display: none;
        }
        .added-icon {
          display: none;
        }
        .replaced-icon {
          display: none;
        }
      }
    }
    .status-tag {
      padding: 0 1px;
      position: absolute;
      top: 16px;
      right: 23px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      background-color: #ff5453;
      color: #fff;
      border-bottom-left-radius: 5px;
      border-top-right-radius: 5px;
      z-index: 1;
      &-item {
        padding: 0 1px;
        display: none;
        &.added-icon {
          display: block;
        }
        &.replaced-icon {
          display: block;
        }
        &.disabled-icon {
          display: block;
        }
        &.deleted-icon {
          display: block;
        }
      }
    }
  }
  .tips {
    line-height: 1,
  }
}

.tips {
  width: 500px;
  p {
    strong {
      font-weight: bold;
    }
    code {
      color: #666;
    }
    font-size: 12px;
    color: #9e9e9e;
    line-height: 1;
  }
}
.copy-source-addr {
  max-width: 650px;
  text-align: left;
  background-color: #fff;
}
pre, code {
  overflow: scroll;
  font-family: monaco,menlo,consolas,courier new,courier,monospace;
}
